<template>
  <el-row class="container">
    <el-col :span="16" class="left">
      <el-row class="left-row">
        <el-col :span="24">
          <el-row class="left-row">
            <el-col :span="12" class="col-padding">
              <div class="card chart">
                <strong>输出电压</strong>
                <div ref="voltageChart" class="chart"></div>
              </div>
            </el-col>
            <el-col :span="12" class="col-padding">
              <div class="card chart">
                <strong>输出电流</strong>
                <div ref="currentChart" class="chart">456</div>
              </div>
            </el-col>
          </el-row>
        </el-col>
        <el-col :span="24" class="col-padding">
          <div class="card">
            <strong>设备列表</strong>
            <el-table :data="devices" @row-click="handleRowClick">
              <el-table-column prop="voltage" label="电压">
                <template #default="sc">
                  {{ sc.row.voltage + "KV" }}
                </template>
              </el-table-column>
              <el-table-column prop="current" label="理论电流">
                <template #default="sc">
                  {{ sc.row.current + "KW" }}
                </template>
              </el-table-column>
              <el-table-column label="操作">
                <template #default="sc">
                  <el-switch
                    @change="handleSwitchChange(sc.row)"
                    v-model="sc.row.device_state"
                    style="
                      --el-switch-on-color: #13ce66;
                      --el-switch-off-color: #ff4949;
                    "
                    inactive-text="关闭"
                    active-text="开启"
                  />
                </template>
              </el-table-column>
            </el-table>
          </div>
        </el-col>
      </el-row>
    </el-col>

    <el-col :span="8" class="right">
      <div class="card" ref="statistic" style="height: 100%">123456</div>
    </el-col>
  </el-row>
</template>

<script setup lang="ts">
import { ref, onMounted, onBeforeUnmount } from "vue";
import { init } from "echarts";
import axios from "axios";
import { ElMessage } from "element-plus";
import { get, set } from "../../util/localStorage";

const voltageChart = ref();
const currentChart = ref();
const statistic = ref();

const devices = ref([]);

let voltageChartIns: any;
let currentChartIns: any;
let statisticChartIns: any;

const voltageOpt: any = {
  tooltip: {
    formatter: "{a}:{c}KV",
  },
  series: [
    {
      name: "电压输出",
      type: "gauge",
      max: 10000,

      progress: {
        show: true,
      },
      detail: {
        valueAnimation: true,
        formatter: "{value}",
      },
      data: get("voltageOptData") || [],
    },
  ],
};

const currentOpt: any = {
  tooltip: {
    formatter: "{a}:{c}KV",
  },
  series: [
    {
      name: "电流输出",
      type: "gauge",
      max: 10000,

      progress: {
        show: true,
      },
      detail: {
        valueAnimation: true,
        formatter: "{value}",
      },
      data: get("currentOptData") || [],
    },
  ],
};

const statisticOpt: any = {
  tooltip: {
    trigger: "axis",
    axisPointer: {
      type: "shadow",
    },
    formatter: "{a}:{c}kW.h"
  },
  xAxis: {
    type: "category",
    data: [],
  },
  yAxis: {
    type: "value",
    max: 9999,
  },
  series: [],
};

const getDevice = () => {
  axios.get("/api/getdevice").then((d) => {
    devices.value = d.data.map((item: any) => {
      return { ...item, device_state: item.device_state ? true : false };
    });
  });
};

getDevice();
const handleSwitchChange = (row: any) => {
  console.log(row);
  axios
    .post("/api/updateDeviceState", {
      id: row.id,
      device_state: row.device_state,
    })
    .then((d) => {
      ElMessage.success({
        message: row.device_state ? "开启成功" : "关闭成功",
      });
    });
};

const handleRowClick = (row: any) => {
  voltageOpt.series[0].data = [
    {
      value: row.voltage,
      name: "单位/KV",
    },
  ];

  currentOpt.series[0].data = [
    {
      value: row.current,
      name: "单位/KW",
    },
  ];

  voltageChartIns.setOption(voltageOpt);
  currentChartIns.setOption(currentOpt);

  set("currentOptData", currentOpt.series[0].data);
  set("voltageOptData", voltageOpt.series[0].data);

  axios
    .post("/api/getStatistics", {
      device_id: row.id,
    })
    .then((d) => {
      console.log(d.data);
      const keys = Object.keys(d.data);
      const val = Object.values(d.data);

      statisticOpt.xAxis.data = keys;
      statisticOpt.series = [{ data: val, type: "bar", name: "发电量" }];
      statisticChartIns.setOption(statisticOpt);
    });
  console.log({ ...row });
};

onMounted(() => {
  voltageChartIns = init(voltageChart.value);
  currentChartIns = init(currentChart.value);
  statisticChartIns = init(statistic.value);

  voltageChartIns.setOption(voltageOpt);
  currentChartIns.setOption(currentOpt);
  statisticChartIns.setOption(statisticOpt);

  const resizeHandle = () => {
    voltageChartIns.resize();
    currentChartIns.resize();
  };

  window.addEventListener("resize", resizeHandle);

  onBeforeUnmount(() => {
    window.removeEventListener("resize", resizeHandle);
  });
});
</script>

<style scoped>
.container {
  /* background: #ccc; */
  height: 100%;
}

.right {
}

.col-padding {
  box-sizing: border-box;
  padding: 5px;
}

.card {
  border: 0;
  height: 100%;
  overflow: hidden;
  padding: 15px;
  box-sizing: border-box;
  box-shadow: 0px 0px 12px rgba(0, 0, 0, 0.12);
  border-radius: 8px;
}

.chart {
  height: 400px;
}
</style>
